<template>
	<div style="padding:20px">
		<div class="menu-top">
			<div class="wos-menu wos-hand" >
				<div :class="menu === '录像' ? 'active' : '' " @click="menu = '录像'">录像</div>
				<div :class="menu === '抓图' ? 'active' : '' " @click="menu = '抓图'">抓图</div>
				<div :class="menu === '实时抽帧' ? 'active' : '' " @click="menu = '实时抽帧'">实时抽帧</div>
				<div :class="menu === '历史抽帧' ? 'active' : '' " @click="menu = '历史抽帧'">历史抽帧</div>
			</div>
		</div>

		<div v-if="menu === '录像'">
			<div style="margin: 40px 0 0 40px">
				<div class="wos-flex" style="margin-bottom: 10px">
					<div class="title">通道：</div>
					<div >
						<select class="wos-input" style="width: 120px">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
						</select>
					</div>
					<div class="title m20">
						<input type="checkbox"> 断网续传
					</div>
					<div>
						<input type="text" class="wos-input" value="24">
						小时（0-168）
					</div>
					<div class="m20">
						<input type="checkbox">冗余
					</div>
				</div>

				<div class="wos-flex">
					<div class="title">录像类型：</div>
					<div>
						<select class="wos-input" style="width: 120px">
							<option value="1">主码流</option>
							<option value="2">辅码流</option>
						</select>
					</div>
					<div class="title m20">
						预录
					</div>
					<div>
						<input type="text" class="wos-input" value="0">
						秒（0-30）
					</div>
				</div>
			</div>
			<div style="padding-top:20px;height: 35px; line-height: 35px; padding-left: 300px" class="wos-flex">
				<div class="m10"><input type="checkbox" checked></div>
				<div class="m5" ><div class="box" style="background-color: #3ad266"></div></div>
				<div class="m10" >普通</div>
				<div class="m10"><input type="checkbox"></div>
				<div class="m5" ><div class="box" style="background-color:yellow"></div></div>
				<div class="m5" >普通</div>
				<div class="m10"><input type="checkbox"></div>
				<div class="m5" ><div class="box" style="background-color:red"></div></div>
				<div class="m5" >普通</div>
				<div class="m10"><input type="checkbox"></div>
				<div class="m5" ><div class="box" style="background-color:blue"></div></div>
				<div class="m5" >普通</div>
			</div>
			<div style="margin-top: 30px">
				<img src="../../assets/images/s1.png" alt="">
			</div>
		</div>


		<div v-if="menu === '抓图'">
			<div style="margin: 40px 0 0 40px">
				<div class="wos-flex" style="margin-bottom: 10px">
					<div class="title">通道：</div>
					<div >
						<select class="wos-input" style="width: 120px">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
						</select>
					</div>
				</div>
			</div>
			<div style="padding-top:20px;height: 35px; line-height: 35px; padding-left: 300px" class="wos-flex">
				<div class="m10"><input type="checkbox" checked></div>
				<div class="m5" ><div class="box" style="background-color: #3ad266"></div></div>
				<div class="m10" >普通</div>
				<div class="m10"><input type="checkbox"></div>
				<div class="m5" ><div class="box" style="background-color:yellow"></div></div>
				<div class="m5" >普通</div>
				<div class="m10"><input type="checkbox"></div>
				<div class="m5" ><div class="box" style="background-color:red"></div></div>
				<div class="m5" >普通</div>
				<div class="m10"><input type="checkbox"></div>
				<div class="m5" ><div class="box" style="background-color:blue"></div></div>
				<div class="m5" >普通</div>
			</div>
			<div style="margin-top: 30px">
				<img src="../../assets/images/s1.png" alt="">
			</div>
		</div>


		<div v-if="menu === '实时抽帧'">
			<div style="margin: 40px 0 0 40px">
				<div class="wos-flex" style="margin-bottom: 10px">
					<div class="title">通道：</div>
					<div >
						<select class="wos-input" style="width: 120px">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
						</select>
					</div>
				</div>
			</div>
			<div style="margin-top: 30px">
				<img src="../../assets/images/s2.png" alt="">
			</div>
		</div>

		<div v-if="menu === '历史抽帧'">
			<div style="margin: 40px 0 0 40px">
				<div class="wos-flex" style="margin-bottom: 10px">
					<div class="title">通道：</div>
					<div >
						<select class="wos-input" style="width: 120px">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
						</select>
					</div>
				</div>
			</div>
			<div style="margin: 40px 0 0 40px">
				<div class="wos-flex" style="margin-bottom: 10px">
					<div class="title">自动备份文件：</div>
					<div >
						<select class="wos-input" style="width: 120px">
							<option value="1">从不</option>
							<option value="2">自定义</option>
						</select>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
    export default {
        name: "setup",
        data:function(){
            return {
                menu:"录像"
            }
        },
    }
</script>

<style scoped>
	.title{
		width: 120px;
		line-height: 26px;
	}
	.m20{
		padding-left: 20px;
		line-height: 26px;
	}
	.m10{
		margin-right: 10px;
	}
	.m5{
		margin-right: 5px;
	}
	.box{
		width: 15px;
		height: 15px;
		margin-top: 8px;
	}
</style>
